<!DOCTYPE html>

<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>12 OffsetBlurTest</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>

<body>
    <script src="../dist/xtype-svg.js"></script>
    <script>
        var dom = XType.SVG.create({
            xtype: 'svg',
            parent: document.body,
            attr: {
                width: 200,
                height: 200,
            },
            children: [{
                xtype: 'defs',
                children: [{
                    xtype: 'filter',
                    attr: {
                        id: 'offset',
                        width: 180,
                        height: 180,
                    },
                    children: [{
                        xtype: 'feoffset',
                        attr: {
                            in: 'SourceGraphic',
                            dx: 60,
                            dy: 60
                        }
                    }]
                }]
            }, {
                xtype: 'rect',
                attr: {
                    x: 0,
                    y: 0,
                    width: 100,
                    height: 100,
                    stroke: 'black',
                    fill: 'green',
                }
            }, {
                xtype: 'rect',
                attr: {
                    x: 0,
                    y: 0,
                    width: 100,
                    height: 100,
                    stroke: 'black',
                    fill: 'green',
                    filter: 'url(#offset)'
                }
            }]
        });

        dom.render();
    </script>
</body>

</html>